<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 <title>Document</title>
 <script src='../public/js/vue.js'></script>
</head>
<body>
  <div id='app'>
    <!-- 
      使用小胡子语法，一般不使用改方法；
      在进行复杂操作时会过于繁琐，且会影响代码逻辑性；
      ps：代码小白都不用这玩意呐 
    -->
    <h1>{{firstName}} {{lastName}}</h1>

    <!-- 
      使用methods 
      在重复使用时，每一次使用都会执行methods 中的方法
      例如如果方法中进行复杂操作每次调用会效率会变低
    -->
    <h1>{{getFullName()}}</h1>
    <!-- <h1>{{getFullName()}}</h1>
    <h1>{{getFullName()}}</h1>
    <h1>{{getFullName()}}</h1> -->
    <!-- 
      使用计算属性
      在重复使用时，vue会将值存储起来每次都只会执行一次
      在进行复杂操作时效率对比methods会更高
    -->
    <h1>{{fullName}}</h1>
    <h1>{{fullName}}</h1>
    <h1>{{fullName}}</h1>
    <h1>{{fullName}}</h1>
  </div>
  <script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        message:'你好啊，李银河！',
        firstName:'掐虎',
        lastName:'yoyo',
      }
    },
    methods:{
      getFullName() {  
        console.log("getFullName 被执行了");
        return this.firstName + ' ' + this.lastName;
      }
    },
    computed:{
      fullName() {  
        console.log("fullName 被执行了");
        return this.firstName + ' ' + this.lastName;
      }
    }
  })
  </script>
</body>
</html>